---
title: Grid Pattern
date: 2023-07-18
description: A background grid pattern made with SVGs, fully customizable using Tailwind CSS.
author: nyxb
published: true
video: https://cdn.nyxbui.design/grid-pattern.mp4
---

<ComponentPreview 
name="grid-pattern-demo"
description="A background grid pattern made with SVGs, fully customizable using Tailwind CSS."
 />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx nyxb@latest add grid-pattern
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="grid-pattern" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Examples

### Linear Gradient

<ComponentPreview name="grid-pattern-linear-gradient" />

### Dashed Stroke

<ComponentPreview name="grid-pattern-dashed" />

## Props

### GridPattern

| Prop              | Type     | Default | Description                                   |
| ----------------- | -------- | ------- | --------------------------------------------- |
| `width`           | `number` | `40`    | Width of the pattern                          |
| `height`          | `number` | `40`    | Height of the pattern                         |
| `x`               | `number` | `-1`    | X offset of the pattern                       |
| `y`               | `number` | `-1`    | Y offset of the pattern                       |
| `squares`         | `number` | `[]`    | X Y coordinates of filled squares as 2D array |
| `strokeDasharray` | `string` | `0`     | Stroke dash array for the pattern             |
